<template>
    <div class="management-outliers">
        <div class="exception-top">
            <a-form-model layout="inline" :model="page" :colon="false" style="width:80%">

                        <a-form-model-item label="人员姓名">
                            <a-input v-model="page.nickname" placeholder="请输入人员姓名"/>
                        </a-form-model-item>

                        <a-form-model-item>
                            <a-button type="primary" @click="selectFn">搜索</a-button>
                        </a-form-model-item>

            </a-form-model>
            <a-button type="primary" @click="()=>{title = '新增用户';addPop = true;}">添加</a-button>
        </div>
        <div class="exception-content">
            <my-table :data-source="tableData" rowKey="id" :pagination="false">
                <a-table-column title="序号" align="center" :ellipsis="true" :customRender="(text, record, index) =>(page.current - 1) * page.size + index + 1" />
                <a-table-column title="姓名" data-index="nickname" align="center" :ellipsis="true" />
                <a-table-column title="账号" data-index="username" align="center" :ellipsis="true" />
                <a-table-column title="性别" align="center" :ellipsis="true">
                    <span slot-scope="text,record">
                        {{record.sex?'女':'男'}}
                    </span>
                </a-table-column>
                <a-table-column title="操作" align="center" width="280px">
                    <template slot-scope="text,record">
                        <div class="handle">
                            <a-button size="small" type="warning" @click="editFn(record)">修改</a-button>
                            <a-button size="small" type="primary"  @click="resetPassword(record.id)">密码重置</a-button>
                            <a-button size="small" type="danger" @click="delFn(record.id)">删除</a-button>
                        </div>
                    </template>
                </a-table-column>
            </my-table>
        </div>
        <div class="exception-bottom clearfix">
            <div class="page-box">
                <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total" :defaultPageSize="page.size" hideOnSinglePage :item-render="itemRender" @change="pagechangeFn" />
            </div>
        </div>
        <!-- 添加弹框 -->
        <a-modal v-model="addPop" width="70%" :title="title" centered @cancel="()=>form = {}" :maskClosable="false" destroyOnClose>
            <a-form-model :model="form" ref="ruleForm" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="运维配置">
<!--                            :display-render="({ labels })=>labels[labels.length - 1]"-->
<!--                            treeCheckStrictly  tree-checkable   :show-checked-strategy="SHOW_ALL"-->
<!--                            <a-cascader v-model="form.reqUserAreaDtoList" :options="treeData" :fieldNames="{label:'name',key:'id',value:'id',children:'menuList'}" placeholder="请选择运维配置"/>-->
                            <a-tree-select v-if="dataLoading1" :treeDefaultExpandAll="true" v-model="form.deptId" :tree-data="treeData" :dropdownStyle="{maxHeight:'500px',overflow: 'auto'}"  :replaceFields="{title:'name',key:'id',value:'id',children:'menuList'}" placeholder="请选择运维配置" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="角色权限">
<!--                            <a-cascader :options="treeData" :fieldNames="{label:'name',key:'id',value:'id',children:'menuList'}" placeholder="请选择运维配置"/>-->
                            <a-tree-select v-if="dataLoading2" :treeDefaultExpandAll="true" v-model="form.roleList" treeCheckStrictly :tree-data="roleTreeData" tree-checkable :dropdownStyle="{maxHeight:'500px',overflow: 'auto'}" :show-checked-strategy="SHOW_ALL" :replaceFields="{title:'roleName',key:'id',value:'id'}" placeholder="请选择角色权限" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="设备列表">
                            <a-tree-select v-if="dataLoading3" :treeDefaultExpandAll="true" v-model="form.equipmentList" :tree-data="equipmentTreeData" tree-checkable :dropdownStyle="{maxHeight:'500px',overflow: 'auto'}" :replaceFields="{title:'name',key:'di',value:'id',children:'equipmentInfos'}" placeholder="请选择设备" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="用户名" prop="username">
                            <a-input v-model="form.username" autocomplete placeholder="请输入账号"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12" v-if="title == '新增用户'">
                        <a-form-model-item label="密码" prop="password">
                            <a-input-password v-model="form.password" autocomplete placeholder="请输入账号密码"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="姓名">
                            <a-input v-model="form.nickname" placeholder="请输入人员姓名"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="电话">
                            <a-input v-model="form.phone" placeholder="请输入电话号码" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="性别">
                            <a-select v-model="form.sex" placeholder="请选择性别">
                                <a-select-option :value="0">男</a-select-option>
                                <a-select-option :value="1">女</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="身份证号" placeholder="请输入电话号码">
                            <a-input v-model="form.idCard" placeholder="请输入身份证号码"/>
                        </a-form-model-item>
                    </a-col>
<!--                    <a-col :span="12">-->
<!--                        <a-form-model-item label="学历">-->
<!--                            <a-input v-model="form.nickname" placeholder="请输入学历"/>-->
<!--                        </a-form-model-item>-->
<!--                    </a-col>-->
                </a-row>
            </a-form-model>

            <template slot="footer">
                <a-button type="primary" @click="SubmitFn">确定</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
import { TreeSelect } from "ant-design-vue";
const SHOW_ALL = TreeSelect.SHOW_ALL;
import md5 from "js-md5";
export default {
    name: "outliers",
    data() {
        return {
            SHOW_ALL,
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
            dataLoading1: false,
            dataLoading2: false,
            dataLoading3: false,
            replaceFields: {
                // 树形字段改变
                title: "name",
                value: "id",
                children: "waringTypePoList",
            },
            nickname: "",
            treeData: [], //  运维点树形下拉
            roleTreeData: [], // 角色权限树形下拉
            equipmentTreeData: [], //  设备树形下拉
            title: "",
            addPop: false,
            page: {
                current: 1,
                size: 10,
                deptTypeId: "",
                nickname: "",
            },
            total: 0,
            tableData: [],
            reqUserAreaDtoList: [],
            form: {
                // 弹窗添加表单数据
                username: "",
                password: "",
                sex: 0,
                nickname: "",
                phone: "",  //  电话
                deptId: "",
                roleList: [],   // 角色
                equipmentList: [], // 设备id
                idCard:"",  //  身份证
                // "deptId":"string //所属部门id",
                // "positionId":"string //职位id",
                // "position":"string //职位名称",
                // "entryTime":"string //入职时间",
                // "certificate":"string //证书",
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: "用户名必填",
                        trigger: "blue",
                    },
                ],
                password: [
                    { required: true, message: "密码必填", trigger: "blue" },
                ],
            },
        };
    },
    methods: {
        selectFn() {
            // 搜索按钮
            this.page.current = 1;
            this.getData();
        },
        // 修改人员
        editFn(data) {
            console.log(data)
            if (data.sex) {
                data.sex = 1;
            } else {
                data.sex = 0;
            }
            data.roleList.forEach((v) => {
                v.value = v.id;
                v.label = v.roleName;
            });
            this.form = {
                // 弹窗添加表单数据
                id: data.id,
                username: data.username,
                password: data.password,
                sex: data.sex,
                nickname: data.nickname,
                phone: data.phone,
                deptId: data.deptId,
                roleList: data.roleList,
                equipmentList:data.equipmentList,
                idCard:data.idCard
            };
            this.title = "修改警告类型值";
            this.addPop = true;
        },
        // 删除人员
        delFn(id) {
            let _that = this;
            this.$confirm({
                title: "是否确认删除？",
                onOk() {
                    _that.$api.delUser(id).then((res) => {
                        if (res.data.data == true) {
                            _that.$message.info("数据删除成功!");
                            _that.getData();
                        } else {
                            _that.$message.info(res.data.errorMessage);
                        }
                    });
                },
                onCancel() {
                    console.log("Cancel");
                },
                class: "delk",
            });
        },
        resetPassword(uid){
            let _that = this;
            this.$confirm({
                title: "是否确认重置密码？",
                onOk() {
                    let data={
                        id : uid,
                        password:md5('123456')
                    };
                    _that.$api.editUser(data).then((res) => {
                        console.log(res.data)
                        if (res.data.code == 0) {
                            _that.$message.info("密码重置成功!");
                        } else {
                            _that.$message.info(res.data.errorMessage);
                        }
                    });
                },
                onCancel() {
                    console.log("Cancel");
                },
                class: "delk",
            });

        },
        // 新增用户确定
        SubmitFn() {
            // 弹窗提交按钮-
            this.$refs.ruleForm.validate((err) => {
                if (err) {
                    var obj = JSON.parse(JSON.stringify(this.form));
                    if (obj.password != null) {
                        obj.password = md5(obj.password);
                    }
                    let arr = [];
                    obj.roleList.forEach((v) => {
                        arr.push(v.value);
                    });
                    obj.roleList = arr;
                    console.log(obj)
                    if (this.title == "新增用户") {
                        // this.form.sex = parseInt(this.form.sex);
                        this.$api.addUser(obj).then((res) => {
                            if (res.data.code == 0) {
                                this.$message.info("添加成功!");
                                this.addPop = false;
                                this.form = {
                                    // 弹窗添加表单数据
                                    username: "",
                                    password: "",
                                    sex: 0,
                                    nickname: "",
                                    phone: "",
                                    reqUserAreaDtoList: [],
                                    roleList: [],
                                    equipmentList: [], // 设备id
                                };
                                this.getData();
                            } else {
                                this.$message.warning(res.data.errorMessage);
                            }
                        });
                    } else {
                        this.$api.editUser(obj).then((res) => {
                            if (res.data.code == 0) {
                                this.form = {
                                    // 弹窗添加表单数据
                                    username: "",
                                    password: "",
                                    sex: 0,
                                    nickname: "",
                                    phone: "",
                                    reqUserAreaDtoList: [],
                                    roleList: [],
                                    equipmentList: [], // 设备id
                                };
                                this.addPop = false;
                                this.$message.info("修改成功!");
                                this.getData();
                            } else {
                                this.$message.warning(res.data.errorMessage);
                            }
                        });
                    }
                }
            });
        },
        // 分页方法
        itemRender(current, type, originalElement) {
            if (type === "prev") {
                return <a> 上一页 </a>;
            } else if (type === "next") {
                return <a> 下一页 </a>;
            }
            return originalElement;
        },
        pagechangeFn(page) {
            this.page.current = page;
            this.getData();
        },
        // 对获取到的数据进行递归处理
        setTreeData(source) {
            let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
            return cloneData.filter((father) => {
                father.scopedSlots = { title: "custom" };
                let Arr = cloneData.filter(
                    (child) => father.id == child.parentId
                );
                Arr.length > 0 ? (father.children = Arr) : ""; //给父级添加一个children属性，并赋值
                return father.parentId == -1; //返回第一层
            });
        },

        // 数据获取方法
        getTreeData() {
            // 获取树形结构
            this.$api.getAllAreasList().then((res) => {
                if (res.data.code == 0) {
                    this.treeData = res.data.data;
                    this.dataLoading2 = true;
                } else {
                    this.$message.info(res.data.errorMessage);
                }
            });
            this.$api
                .postRoleFindByPage({ current: 1, size: 10000 })
                .then((res) => {
                    if (res.data.code == 0) {
                        this.roleTreeData = this.setTreeData(res.data.data);
                        this.dataLoading1 = true;
                    } else {
                        this.$message.info(res.data.errorMessage);
                    }
                });
            this.$api.getFindMonitorInfoByUserId().then((res) => {
                if (res.data.code == 0) {
                    // res.data.data.forEach((v) => {
                    //     v.equipmentInfos = v.companyEquipmentPos;
                    //     // v.checkable = false;
                    //     // v.equipmentInfos.forEach((item) => {
                    //     //     item.checkable = false;
                    //     // });
                    // });
                    console.log(res.data.data)
                    this.equipmentTreeData = res.data.data;
                    this.dataLoading3 = true;
                } else {
                    this.$message.info(res.data.errorMessage);
                }
            });
        },
        getData() {
            this.$api.getUserList(this.page).then((res) => {
                if (res.data.code == 0) {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                }
            });
        },
    },
    mounted() {
        this.getData();
        this.getTreeData();
    },
};
</script>

<style lang="scss" scoped>
.management-outliers {
    width: 98%;
    height: 98%;
    padding: 1%;
    box-sizing: border-box;

    .exception-top {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .exception-content {
        width: 100%;
        height: calc(94% - 60px);
        .handle {
            display: flex;
            justify-content: space-around;
        }
    }

    .exception-bottom {
        width: 100%;

        .page-box {
            float: right;
        }
    }
}
</style>
